<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {
            height: 200px;
            background-color: pink;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <input type="button" value="获取" id="getBtn">
    <input type="button" value="设置" id="setBtn">
    <div id="div1" style="width: 200px;"></div>
    <div id="div2" style="width: 300px;"></div>
    <div id="div3" style="width: 400px;"></div>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //css()方法：设置/获取样式

            //1.获取样式:css（）方法设置参数为要获取值的样式名
            $('#getBtn').click(function () {
                //1.1获取id为div1这个元素的样式
                // console.log($('#div1').css('width'));;
                // console.log($('#div1').css('height'));;
                // console.log($('#div1').css('background-color'));;
                // console.log($('#div1').css('backgroundColor'));;
                // console.log($('#div1').css('border'));;



                //1.2获取标签为div的元素们的样式
                //获取包含了多个dom元素的jQuery对象的样式，只能获取到第一个dom对象的样式
                console.log($('div').css('width'));
                //注意：获取样式操作只会返回第一个元素对应的样式值
            });

            //2.设置样式: css(样式名，样式值)
            //设置的样式是行内样式
            $('#setBtn').click(function () {
                //2.1给id为div1的这个元素设置样式
                //设置单样式
                // $('#div1').css('width', '300px');
                // $('#div1').css('height', '300px');
                // $('#div1').css('backgroundColor','red');
                // $('#div1').css('border','10px solid green');

                //设置多样式
                // $('#div1').css({
                //     width: '300px',
                //     height: '300px',
                //     backgroundColor:'green',
                //     border:'10px solid pink'
                // });


                //2.2给标签为div的元素们设置样式
                $('div').css({
                    width: '300px',
                    height: '300px',
                    backgroundColor: 'green',
                    border: '10px solid pink',
                    marginTop:'10px'
                });
            });
        })
    </script>
</body>

</html>